<template>
  <div class="tab">
    <h3>事件管理</h3>
    <div class="tab__tabbackgroud">
      <div>
        <el-button @click="onAdd" type="primary">增加事件</el-button>
      </div>
      <table
        class="tab__tabbackgroud__all"
        border=""
        width="600px"
        height="50px"
      >
        <tr>
          <th>ID</th>
          <th>事件名称</th>
          <th>事件地址</th>
          <th>创建日期</th>
          <th>执行状态</th>
          <th>操作</th>
        </tr>
        <tr
          class="tab__tabbackgroud__tr"
          v-for="(item, index) in contentList"
          :key="item.id"
        >
          <!-- <td>{{ index + 1 }}</td> -->
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.address }}</td>
          <td>{{ item.today }}</td>
          <td>{{ item.sarus }}</td>
          <td>
            <el-button
              v-if="item.sarus === '已完成'"
              size="small"
              type="primary"
              text
            >
              查看
            </el-button>
            <el-button
              v-if="item.sarus === '正在执行' || item.sarus === '未执行'"
              @click="onEdit(item)"
              size="small"
              type="primary"
              text
              >编辑</el-button
            >&nbsp;
            <el-button
              v-if="item.sarus === '未执行'"
              @click="onDelete(index)"
              type="primary"
              text
              size="small"
              >删除</el-button
            >
          </td>
        </tr>
      </table>
    </div>
    <el-dialog v-model="showEdit" title="编辑或新增事件">
      <div>
        <div class="tab__addTab">
          <div class="tab__addTab__input">
            事件名称<input v-model="content.name" /><br />
            事件地址<input v-model="content.address" /><br />
            执行状态<select v-model="content.sarus">
              <option value="未执行">未执行</option>
              <option value="正在执行">正在执行</option>
              <option value="已完成">已完成</option></select
            ><br />
          </div>
          <div class="tab__addTab__but">
            <button @click="addTabContent">保存</button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { ElButton, ElMessageBox, ElDialog } from 'element-plus'

export default {
  name: 'eventPage',
  components: {
    ElButton,
    ElDialog,
  },
  setup() {
    const contentList = ref(
      JSON.parse(
        localStorage.getItem('eventList')
          ? localStorage.getItem('eventList')
          : '[]'
      )
    )
    const content = ref({
      // id: Math.random(), 随机数生成
      id: '', // 当前时间戳
      name: '',
      address: '',
      today: new Date().toLocaleDateString(),
      sarus: '',
      check: '',
    })

    const addTabContent = () => {
      if (!content.value.id) {
        // 新增
        content.value.id = Date.now()
        contentList.value.push(JSON.parse(JSON.stringify(content.value)))
        localStorage.setItem('eventList', JSON.stringify(contentList.value))
      } else {
        // 更新
        for (let i = 0; i < contentList.value.length; i++) {
          const element = contentList.value[i]
          if (element.id == content.value.id) {
            // 删除、插入
            contentList.value.splice(i, 1, content.value)
            break
          }
        }
      }
      showEdit.value = false
    }

    function onDelete(index) {
      ElMessageBox.confirm('确定要删除吗？', '温馨提示').then(() => {
        // 点确定在这里继续执行
        console.log(index)
        contentList.value.splice(index, 1)
      })
    }

    // 编辑部分代码
    const showEdit = ref(false)
    function onEdit(item) {
      showEdit.value = true
      content.value = JSON.parse(JSON.stringify(item))
    }

    // 新增
    function onAdd() {
      showEdit.value = true
      content.value = {
        id: '',
        name: '',
        address: '',
        today: new Date().toLocaleDateString(),
        sarus: '',
        check: '',
      }
    }
    return {
      addTabContent,
      contentList,
      content,
      onDelete,
      showEdit,
      onEdit,
      onAdd,
    }
  },
}
</script>

<style lang="scss" scoped>
.tab {
  &__tabbackgroud {
    // background-color: rgb(233, 235, 235);

    &__all {
      margin: 0 auto;
      th {
        background-color: rgb(191, 194, 194);
      }
    }

    &__tr {
      // background-color: rgb(191, 194, 194);
    }
  }

  &__text {
    background-color: rgb(11, 61, 188);
    display: inline-block;
    margin-top: 15px;
    margin-left: 30px;
    border-radius: 9px;
    font-size: 20px;
  }

  &__addTab {
    margin-top: 40px;

    &__input {
      text-align: center;
      margin: 0 12px;
    }

    &__but {
      text-align: center;
    }
  }
}
</style>
